<script setup lang="ts" name="Test">
import { ChildComponent } from "./components";
import Logger from "@/utils/Logger";

import { toNumber } from "lodash-es";
import { useFetch, useMouse } from "@/utils/mouse";

let posts = reactive({ id: toNumber("1"), title: "My Journey With Java" });

let danger = ref("danger");

// 监听到事件
let enlarge = (color: string) => {
  // 改变颜色
  let box = document.getElementById("box");
  box.style.background = color;
  Logger.print(color, color);
  // 改变标题
  posts.title = "Java Interface Object";
};

let fns = () => {
  return "我是传入的函数";
};

let firstName = ref("");
let lastName = ref("");

let slot = ref("具名插槽使用");

/*组合式函数*/

// 组合式函数 无参数 实例
let { x, y } = useMouse();

// 组合式函数 有参数 实例
let baseUrl = "https://jsonplaceholder.typicode.com/todos/";
let id = ref("1");
let url = computed(() => baseUrl + id.value);
let { data, error } = useFetch(url);
let buttonOnclick = (val: number) => {
  id.value = String(val);
};
// 重试
let retry = () => {
  id.value = "";
  id.value = "1";
};
</script>

<template>
  <h2>组件 prop 事件 插槽 组合式函数</h2>
  <h3>{{ firstName }} === {{ lastName }}</h3>
  <!--    <ChildComponent v-bind="posts" @enlarge="enlarge" />-->
  <ChildComponent
    :title="posts.title"
    :id="posts.id"
    @enlarge="enlarge"
    :validatorProp="danger"
    :fns="fns"
    v-model:first-name="firstName"
    v-model:mm.upper="lastName"
    class="b"
  >
    <template #main>
      <p style="color: red">{{ slot }}</p>
    </template>
    <template #foot>
      <p style="color: royalblue">{{ slot }}</p>
    </template>
    <template #slotProp="{ text, count }">
      <p><b>插槽 传递出来的属性：</b>{{ text }}, {{ count }}</p>
    </template>
    <template #listSlot="{ body, username, likes }">
      <p><b>插槽 传递出来的属性：</b></p>
      <div class="item">
        <p>{{ body }}</p>
        <p class="meta">by {{ username }} | {{ likes }} likes</p>
      </div>
    </template>
  </ChildComponent>
  <hr />
  <p><b>组合式函数使用：</b></p>
  <p><b>组合式函数 无参数 实例: </b>鼠标跟踪器Mouse position is at: {{ x }}, {{ y }}</p>
  <p><b>组合式函数 有参数 实例: </b>异步数据请求时，我们常常需要处理不同的状态：加载中、加载成功和加载失败</p>
  <p>
    <b> 加载文章ID: </b>
    <button v-for="i in 3" :key="i" @click="buttonOnclick(i)">{{ i }}</button>
  </p>

  <div v-if="error">
    <p>发送错误: {{ error.message }}</p>
    <button @click="retry">重试</button>
  </div>
  <div v-else-if="data">
    数据为:
    <pre>{{ data }}</pre>
  </div>
  <div v-else>数据加载中...</div>
</template>

<style scoped>
.b {
  background-color: blanchedalmond;
}

.meta {
  font-size: 0.8em;
  color: #42b883;
}
</style>
